<template>
  <div>
    <ContentHeader title="学员管理">
      <el-form :model="store.search" inline>
        <el-form-item>
          <el-select v-model="store.search.field" placeholder="请选择" style="width: 150px;" clearable>
            <el-option v-for="item in store.fields" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="store.search.title" placeholder="请输入搜索内容" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
          </el-button>
        </el-form-item>
      </el-form>
    </ContentHeader>
    <ContentBody v-loading="store.loading">
      <el-table :data="store.students"
        :stripe="true"
        :highlight-current-row="true"
      >
        <el-table-column property="accountId" width="80" />
        <el-table-column property="avatar" label="头像">
          <template #default="scope">
            <el-avatar :src="cfg.imageUrl(scope.row.avatar)" v-if="scope.row.avatar !== ''" />
            <el-avatar v-else> {{ scope.row.username }} </el-avatar>
          </template>
        </el-table-column>
        <el-table-column property="name" label="姓名" />
        <el-table-column property="username" label="用户名" />
        <el-table-column property="phone" label="手机" />
        <el-table-column property="email" label="邮箱" />
        <el-table-column property="gender" label="性别" :formatter="(row: any) => row.gender === 1 ? '男' : (row.gender === 2 ? '女' : '未知')" />
        <el-table-column property="birthday" label="生日" />
        <el-table-column property="address" label="地址" />
        <el-table-column property="createdAt" label="注册时间" :formatter="(row: any) => timeFormatter(row.createdAt)" />
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button plain @click="handleStudy(scope.row)">学习记录</el-button>
            <el-button plain @click="handleEdit(scope.row)">
              <el-icon size="small"><Edit /></el-icon>
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #pagination>
        <el-pagination background layout="prev, pager, next"
          hideOnSinglePage
          :total="store.pager.total"
          :page-size="store.pager.pageSize"
          @current-change="handlePageChange"
        />
      </template>
    </ContentBody>
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useStudentStore } from '@/stores/student'
import { Edit, Search } from '@element-plus/icons-vue'
import { timeFormatter } from '@/utils/utils'
import { useRouter } from 'vue-router';
import cfg from '@/config/config'

const store = useStudentStore()
const router = useRouter()
const handlePageChange = (current: number) => {
  store.changePage(current, store.search.limit)
}
const handleSearch = () => {
  store.changePage(1, store.search.limit)
}
const handleEdit = (row: any) => {
  router.push({name: 'education_students_update', params: {id: row.accountId} })
}
const handleStudy = (row: any) => {
  router.push({name: 'education_students_study', params:{id: row.accountId}})
}

onMounted(() => {
  store.loadStudents()
})
</script>